<template>
    <div class="headContent">
        <img src="../assets/img/head.png" alt="">
        <div class="leftBtn">
            <span v-for="item in titleTextleft" @mouseenter="overList(item.id)" @mouseleave="leaveListn"
                @mousedown="downBig(item.text, $event)" @mouseup="upBig(item.text, $event)">{{ item.text
                }}</span>
            <!-- mouseover 和 mouseout
            mouseenter 和 mouseleave -->
            <!-- 相机列表选项 -->
            <div class="childrenList" ref="childrenListref" @mouseleave="leaveList">
                <!-- <span></span> -->
                <span v-for="item in twotitle" @mousedown="downBig(item.text, $event)"
                    @mouseup="upBig(item.text, $event)">{{ item.text
                    }}</span>
                <!-- <span @mousedown="downBig" @mouseup="upBig">相机列表</span> -->
            </div>
        </div>
        <div class="rightBtn">
            <span v-for="item in titleTextright" @mouseenter="overList(item.id)" @mousedown="downBig(item.text, $event)"
                @mouseup="upBig(item.text, $event)">{{ item.text
                }}</span>
            <!-- <div class="childrenList">
                <span></span>
            </div> -->
        </div>
        <!-- 按钮123 -->
        <div class="jia" @click="aaa">

        </div>
        <!-- 信息 -->
        <div class="xinxi" v-if="bbb">
            <img src="../assets/img/点位信息.png" alt="">
            <b @click="ccc"
                style="display: inline-block;position: absolute;width: 50px;height: 50px; top: 140px;left: 380px;cursor: pointer;"></b>
        </div>
        <div class="b3" v-if="c1">
            <!-- <video id="b33"></video> -->
            <video id="b33" ref="webrtc" autoplay>
                <!-- <source src="" type="application/x-mpegURL" /> -->
            </video>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import kang from "../common/mitt.js"
import http from "axios"
import { ElMessage } from 'element-plus'
let tags = ref(false)//协同关闭
let bbb = ref(false)
let aaa = () => {
    bbb.value = !bbb.value
}
let c1 = ref(false)
let webrtc = ref()
let ccc = () => {
    c1.value = !c1.value
    setTimeout(() => {
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/btcc3/webrtc')

    }, 300)
}
const rtcVideo = (vdo: any, url: any) => {
    let webrtc: any, webrtcSendChannel: any;

    startPlay();
    function startPlay() {
        webrtc = new RTCPeerConnection({
            sdpSemantics: "unified-plan"
        });
        webrtc.onnegotiationneeded = handleNegotiationNeeded;
        webrtc.ontrack = function (event) {
            vdo.srcObject = event.streams[0];
            vdo.play();
            //webrtc.getReceivers()[0].playoutDelayHint = 0;// 0.2s延迟
        }
        webrtc.addTransceiver('video', {
            'direction': 'sendrecv'
        });
        webrtcSendChannel = webrtc.createDataChannel('foo');

        webrtcSendChannel.onclose = () => {
            startPlay();
            console.log('[onclose] ' + url);
        }
        webrtcSendChannel.onopen = () => {
            webrtcSendChannel.send('ping');
            let webrtcSendChannelInterval = setInterval(() => {
                webrtcSendChannel.send('ping');
            }, 1000)
            console.log('[onopen] ' + url + '  延迟(ms):' + webrtcSendChannelInterval);
        }

        webrtcSendChannel.onmessage = e => console.log(e.data);

    }
    async function handleNegotiationNeeded() {
        let offer = await webrtc.createOffer();

        await webrtc.setLocalDescription(offer);
        $.post(url, {
            data: btoa(webrtc.localDescription.sdp)
        }, function (data) {
            try {
                webrtc.setRemoteDescription(new RTCSessionDescription({
                    type: 'answer',
                    sdp: atob(data)
                }))
            } catch (e) {
                console.warn(e);
            }
        });
    }

    vdo.addEventListener('loadeddata', () => {
        vdo.play();
    });

    vdo.addEventListener('error', () => {
        console.log('video1 err.')
    });

}
//头部字体
const titleTextleft = ref([
    {
        id: 0,
        text: '全景视频'
    },
    {
        id: 1,
        text: '自动巡航'
    },
    {
        id: 2,
        text: '局部锁定'
    }, {
        id: 3,
        text: '历史事件'
    },
])
const titleTextright = ref([
    {
        id: 4,
        c: 4,
        text: '球机协同',
        children: [
            {
                id: 0,
                text: '关闭视频',
            },
            {
                id: 1,
                text: '相机列表',
            }
        ]
    },
    {
        id: 5,
        c: 5,
        text: '报警联动'
    },
    {
        id: 6,
        c: 6,
        text: '业务关联'
    }, {
        id: 7,
        c: 7,
        text: '态势分析'
    },
])
// 二级
const twotitle = ref([
    {
        id: 0,
        text: '关闭视频'
    },

])
let mapTag = ref(true)
const props = defineProps(["isShow"]);
const emits = defineEmits(['editcameraList', 'autocruise', 'PanoramicVideo', 'closeVideo', 'setPlay', 'setFlight', 'cesi', 'addMoxing'])
// 
const downBig = (t: any, e: any) => {
    e.target.style.transform = "scale(1.1)"
    // if (t == '全景视频') {
    //     emits('PanoramicVideo')
    // }else if(t == '关闭视频'){
    //     alert('关闭')
    // }

}
let timer: any
// let flightNum = ref();
const upBig = (t: any, e: any) => {
    e.target.style.transform = "scale(1)"
    setTimeout(() => {
        childrenListref.value.style.display = "none"
    }, 200)
    if (t == '局部锁定') {
        // console.log(props);
        emits('editcameraList', true)//显示相机列表
    } else if (t == '自动巡航') {
        emits('autocruise', true)//显示巡航设置
    } else if (t == '全景视频') {
        emits('PanoramicVideo')
    } else if (t == '关闭视频') {
        emits('closeVideo')
    } else if (t == '历史视频') {
        // alert('历史视频')
        kang.emit('blockHvideo', true)
    } else if (t == '历史追溯') {
        // alert('历史追溯')
        kang.emit('vHistoricaltracing', true)
    } else if (t == "球机协同") {
        // alert('1')
        ajax()
        setInterval(() => {
            ajax()
        }, 30000)
        let num = sessionStorage.getItem('camera')
        // console.log(num);
        if (num == null || num == '0') {
            ElMessage({
                message: '正在拉取信息，再次点击开启',
                type: 'warning',
            })
            kang.emit('vBall', false)
            return
        }
        tags.value = !tags.value

        // setTimeout(() => {
        if (tags.value) {
            ElMessage({
                message: '球机协同已开启',
                type: 'success',
            })
            // e.target.style.background='url(../assets/img/btn_2.png)'
            e.target.style.color = '#f38b04'
            kang.emit('vBall', true)


            // kang.emit('aNum',num)
            emits('setPlay', num)//细节联动
            emits('setFlight', num)//飞行
            timer = setInterval(() => {
                autosetPlay()
            }, 30000)
        } else {
            ElMessage({
                message: '球机协同已关闭',
                type: 'success',
            })
            kang.emit('vBall', false)
            e.target.style.color = '#fff'
            timer = clearInterval(timer)
            // timer = setInterval(() => {
            //     autosetPlay('0')
            // }, 15000)
        }
        // }, 1000)
    } else if (t == '报警联动') {
        // alert('2')
        // ajax()
        // setInterval(() => {
        //     ajax()
        // }, 15000)
        if (!props.isShow.vPolice) {
            kang.emit('vPolice', true)
            kang.emit('vLog', false)
            kang.emit('vAnalysis', false)
            // ElMessage({
            //     message: '已打开报警',
            //     type: 'success',
            // })
        } else {
            kang.emit('vPolice', false)
        }
    } else if (t == '业务关联') {
        
        // if (!props.isShow.vLog) {
        //     kang.emit('vLog', true)
        //     kang.emit('vPolice', false)
        //     kang.emit('vAnalysis', false)
        // } else {
        //     kang.emit('vLog', false)

        // }
        emits('cesi')
    } else if (t == '态势分析') {
        // alert('4')vAnalysis
        if (!props.isShow.vAnalysis) {
            kang.emit('vLog', false)
            kang.emit('vPolice', false)
            kang.emit('vAnalysis', true)
        } else {
            kang.emit('vAnalysis', false)

        }
    } else if (t == '地图切换') {
        mapTag.value = !mapTag.value
        emits('addMoxing', mapTag.value)
    }
}
const autosetPlay = () => {
    // alert('1')
    let num = sessionStorage.getItem('camera')
    if (num == '0') {
        kang.emit('vBall', false)
        return
    }
    kang.emit('vBall', true)
    ajax()
    setInterval(() => {
        ajax()
    }, 30000)
    kang.emit('aNum', num)
    emits('setPlay', num)//细节联动
    emits('setFlight', num)//飞行
    // }
}
let childrenListref = ref()
let leaveListTag = ref(false)
const overList = (id: Number) => {
    // console.log(id);
    if (id == 0) {
        childrenListref.value.style.display = "block"
        leaveListTag.value = true
        childrenListref.value.style.top = '.625rem'
        childrenListref.value.style.left = '0rem'
        twotitle.value = [
            {
                id: 0,
                text: '关闭视频'
            },
            // {
            //     id: 1,
            //     text: '相机列表'
            // },
        ]
    } else if (id == 1) {
        childrenListref.value.style.display = "block"
        leaveListTag.value = true
        childrenListref.value.style.top = '.625rem'
        childrenListref.value.style.left = '1.75rem'
        twotitle.value = []
    } else if (id == 2) {
        childrenListref.value.style.display = "block"
        leaveListTag.value = true
        childrenListref.value.style.top = '.625rem'
        childrenListref.value.style.left = '3.5rem'
        twotitle.value = [
            // {
            //     id: 0,
            //     text: '关闭视频'
            // },
            // {
            //     id: 1,
            //     text: '相机列表'
            // },
        ]
    } else if (id == 3) {
        childrenListref.value.style.display = "block"
        leaveListTag.value = true
        childrenListref.value.style.top = '.625rem'
        childrenListref.value.style.left = '5.25rem'
        twotitle.value = [
            {
                id: 0,
                text: '历史视频'
            },
            {
                id: 1,
                text: '历史追溯'
            },
        ]
    } else if (id == 6) {
        childrenListref.value.style.display = "block"
        leaveListTag.value = true
        childrenListref.value.style.top = '.625rem'
        childrenListref.value.style.left = '19.75rem'
        twotitle.value = [
            {
                id: 6,
                text: '数据传感器'
            },
            {
                id: 7,
                text: '地图切换'
            },

        ]
    }
}
// 移出二级菜单
const leaveList = () => {
    childrenListref.value.style.display = "none"
    leaveListTag.value = false
}
const leaveListn = () => {
    // leaveListTag.value = false
    // if (!leaveListTag.value) {
    //     setTimeout(() => {
    //         childrenListref.value.style.display = "none"
    //         leaveListTag.value = false
    //     }, 2000)
    // }
}
// 启用报警联动
let ajax = () => {
    // sessionStorage.setItem('camera', '1')
    http({
        method: "post",
        url: `/sinlogin/userManage/selbaojing`,
        // params: {
        //     username: "admin",
        //     password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        // },
        baseURL: "abs",
    })
        .then((response) => {
            console.log("请求成功", response, response.data);
            sessionStorage.setItem('camera', JSON.stringify(response.data))
        })
        .catch((error) => {
            console.log("请求失败", error);
        });
};

</script>
<style scoped>
.headContent {
    position: relative;
}

img {
    width: 100vw;
}

.leftBtn {
    position: absolute;
    top: 1rem;
    left: .375rem;
    z-index: 2;
}

.rightBtn {
    position: absolute;
    top: 1rem;
    right: .375rem;
    z-index: 2;
}

.leftBtn>span,
.rightBtn>span,
.childrenList span {
    cursor: pointer;
    display: inline-block;
    width: 1.25rem;
    height: .625rem;
    background-image: url("../assets/img/btn_1.png");
    background-repeat: no-repeat;
    background-size: 1.25rem .625rem;
    margin: 0 .25rem;
    font-size: .2rem;
    color: #fff;
    line-height: .6rem;
    text-align: center;
    font-weight: bold;
}

.childrenList span:nth-child(1) {
    /* z-index: 0; */
    /* margin-top: -0.13rem; */
    /* top: -0.13rem; */
}

span:hover {
    background-image: url("../assets/img/btn_2.png");
    color: rgb(21, 165, 221);
}

.childrenList {
    width: 1.25rem;
    position: absolute;
    top: .625rem;
    left: 0rem;
    z-index: 2;
    display: none;
}

.childrenList span {
    margin-top: .125rem;
}

.jia {
    cursor: pointer;
    position: relative;
    left: 12.7rem;
    top: -30px;
    width: 60px;
    height: 60px;
    /* background-color: red; */
}

.xinxi {
    position: relative;
    left: 14rem;
    top: -30px;
    width: 600px;
    height: 250px;
    background-color: rgba(235, 220, 220, 0.5);
}

.xinxi img {
    width: 100%;
    height: 100%;
}

.b3 {
    width: 900px;
    height: 600px;
    /* background-color: #fff; */
    position: fixed;
    top: 210px;
    left: 40px;
    z-index: 9;
}

.b3 video {
    width: 900px;
    height: 600px;
}
</style>